<template>
	<div class="containerAll me-discountCoupon">
		<tab>
			<tab-item selected @on-item-click="onItemClick">未使用</tab-item>
			<tab-item @on-item-click="onItemClick">已使用</tab-item>
			<tab-item @on-item-click="onItemClick">已过期</tab-item>
		</tab>
		<div v-show="noData" class='flex flex-1 flex-item-center flex-c'>
			<img class='couponone' src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/noconpon.png' />
			<span class="status-text">{{coupononetext}}</span>
		</div>
		<div v-show="hasData" class="content mescroll" id="mescroll">
			<discount-couponc v-for='(item, index) in info' :key='index' :item='item' :topClass="topClass" :bottomClass="bottomClass" class='discount'></discount-couponc>
		</div>
	</div>
</template>
<script>
	import http from '@/util/http'
	import Api from '@/util/api'
	import { Tab, TabItem } from 'vux'
	import MeScroll from 'mescroll'
	import utils from '@/util/util'
	import DiscountCouponc from '@/components/huabanShop/discountCouponC'
	export default {
		components: {
			Tab,
			TabItem,
			DiscountCouponc
		},
		data() {
			return {
				topClass: 'topNoUsed',
				bottomClass: 'bottomNoUsed',
				info: [],
				noData: false,
				hasData: false,
				coupononetext: '无未使用的优惠券',
				statusEnumList: ["UNUSED"],
				pageNum: 1
			}
		},
		mounted: function() {
			var self = this;
			self.mescroll = new MeScroll("mescroll", {
				down: {
					callback: self.downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				},
				up: {
					callback: self.upCallback, //上拉加载的回调
					isBounce: true //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
						,
					offset: 50
				}
			});
		},
		created: function() {
			this.$vux.loading.show({
				text: 'Loading'
			})

			this.getCoupon();
		},
		methods: {
			onItemClick(index) {
				this.mescroll.endUpScroll(false);
				this.mescroll.lockUpScroll();
				this.hasData= false;
				if(index == 0) {
					console.log('000')
					this.info = []
					this.noData = false;
					this.topClass = 'topNoUsed';
					this.bottomClass = 'bottomNoUsed';
					this.coupononetext = '无未使用的优惠券';
					this.$vux.loading.show({
						text: 'Loading'
					})
					this.statusEnumList = ["UNUSED"];
					this.pageNum = 1;
					this.downCallback();
				} else if(index == 1) {
					this.info = []
					this.noData = false;
					this.topClass = 'topUsed';
					this.bottomClass = 'bottomUsed';
					this.coupononetext = '无已使用的优惠券';
					this.$vux.loading.show({
						text: 'Loading'
					})
					this.statusEnumList = ["USED", "DISABLED", "FREEZE"];
					this.pageNum = 1;
					this.downCallback();
				} else {
					this.info = []
					this.noData = false;
					this.topClass = 'topExpire';
					this.bottomClass = 'bottomExpire';
					this.coupononetext = '无已过期的优惠券';
					this.$vux.loading.show({
						text: 'Loading'
					})
					this.statusEnumList = ["EXPIRED"];
					this.pageNum = 1;
					this.downCallback();
				}
			},
			getCoupon() {
				let params = {
					numPerPage: 5,
					order: "asc",
					pageNum: 1,
					statusEnumList: this.statusEnumList
				}
				http.post(Api.couponFindCoupon, params).then(res => {
					this.$vux.loading.hide();
					if(res.code == 200) {
						
						if(res.data.rows.length < 1) {
							this.mescroll.endUpScroll(true);
							this.mescroll.lockUpScroll();
							this.noData = true;
						} else {
							this.hasData = true;
							this.info = res.data.rows;
						}
					} else {
						this.toast(res.message);
					}
				})
			}
			,downCallback() {
				console.log('down')
				http.post(Api.couponFindCoupon, {
					numPerPage: 5,
					order: "asc",
					pageNum: 1,
					
					statusEnumList: this.statusEnumList
				}).then(res => {
					this.$vux.loading.hide();
					if(res.code == 200) {
						this.pageNum = 1;
						let self = this;
						if (res.data.rows.length < 1) {
							this.mescroll.endUpScroll(true);
							this.mescroll.lockUpScroll();
							this.noData = true;
						} else{
							this.hasData= true;
							this.info = res.data.rows;
							this.mescroll.endDownScroll(false);
							if(this.info.length == res.data.total) {
								this.mescroll.endUpScroll(true);
								setTimeout(function() {
									self.mescroll.lockUpScroll();
								}, 500)
	
								return;
							}
							this.mescroll.endUpScroll(false);
							this.mescroll.lockUpScroll(false);
						}
						
						//						this.info = res.data.rows;
						//						this.mescroll.endDownScroll();
						//						this.mescroll.lockUpScroll(false);
					} else {
						this.toast(res.message)
					}
				})
			},
			upCallback(page) {
				console.log(222)
				this.pageNum++;
				http.post(Api.couponFindCoupon, {
					numPerPage: 5,
					order: "asc",
					pageNum: this.pageNum,
					statusEnumList: this.statusEnumList
				}).then(res => {
					this.$vux.loading.hide();
					console.log(res);
					if(res.code == 200) {
						this.info = [...this.info, ...res.data.rows];
						this.mescroll.endUpScroll(false)
						if(this.info.length == res.data.total) {
							this.mescroll.endUpScroll(true);
							this.mescroll.lockUpScroll();
						}
						//						this.mescroll.endUpScroll(false)
						//						for (let i = 0; i < res.data.rows.length; i++) {
						//							this.info.push(res.data.rows[i]);
						//							if (this.info.length == res.data.total) {
						//								this.mescroll.lockUpScroll();
						//								this.toast('数据加载完成');
						//							}
						//						}
					} else {
						this.toast(res.message)
					}
				})
			}

		}

	}
</script>
<style lang="less" rel="stylesheet/less">
	@import '../../assets/css/mescroll.min.css';
	.vux-tab-warp {
		height: 1rem !important;
		padding-top: 0 !important;
		position: fixed;
		top: 0;
	}
	
	.vux-tab {
		height: 1rem !important;
	}
	
	.vux-tab-container {
		height: 1rem !important;
	}
	.vux-tab-ink-bar {
		background-color: #fbc200 !important;
	}
	
	.vux-tab .vux-tab-item {
		color: #909090 !important;
		font-size: .3rem;
		height: 1rem !important;
		line-height: 1rem !important;
	}
	
	.vux-tab .vux-tab-item.vux-tab-selected {
		color: #464646 !important;
	}
	
	.me-discountCoupon {
		width: 7.5rem;
		height: 100%;
		max-height: 100%;
		background: #F2F2F2;
		.content {
			background: #F2F2F2;
			width: 6.9rem;
			position: relative;
			padding: 0 .3rem 1rem;
			.mescroll-upwarp{
				width: 6.9rem;
				position: absolute;
				bottom: 0;
			}
			.discount {
				margin-top: .3rem;
			}
		}
		.couponone {
			height: 3.75rem;
			width: 3.75rem;
		}
		.status-text {
			color: #777;
			font-size: .3rem;
		}
	}
</style>